import React, { useState } from 'react';
import RulesetPannel from '../../form/RuleSet/pannel';
import { Row, Col, Button } from 'antd';
import { EXCUTE_MODE } from 'src/utils/constant';

export default function RuleSet(props) {
  const { value = {}, logs = {} } = props;
  const [openStatus, setOpenStatus] = useState(false);

  // 折叠/打开规则
  function toggleRules() {
    setOpenStatus(!openStatus);
    document.querySelectorAll('.rule-pannel-collapse').forEach((item) => {
      if (!openStatus) {
        item.className = 'rule-pannel-collapse open';
      } else {
        item.className = 'rule-pannel-collapse';
      }
    });
  }
  return (
    <div>
      <Row type='flex' justify='space-between' align='middle' style={{ margin: '0 0 10px 0' }}>
        <Col>执行模式:{(EXCUTE_MODE.find((it) => it.value === value.execute_mode) || {}).label}</Col>
        <Col>
          <Button onClick={() => toggleRules()}>{openStatus ? '折叠规则' : '展开规则'}</Button>
        </Col>
      </Row>

      {value.express_rules.map((it, index) => {
        return (
          <RulesetPannel
            actions={props.actions}
            variable={props.variable}
            value={it}
            cid={it.id}
            operator={props.operator}
            key={it.id}
            renderBody={true}
            disabled={true}
            logs={logs}
          />
        );
      })}
    </div>
  );
}
